<template>
  <div class="account-info">
    <!-- 登录密码 -->
    <div class="account-item">
      <div class="flex-row flex-1">
        <IconLock class="svg" />
        <div class="content">
          <div class="text">
            <div class="label">
              {{ $t("content.profile.base.password.label") }}
            </div>
            <div class="descri">
              {{ $t("content.profile.base.password.tip") }}
            </div>
          </div>
          <div class="control">
            <div class="status">
              <IconCircleCheck class="circle-svg" />
              <span>{{ $t("tag.is_set") }}</span>
            </div>
            <span class="split">|</span>
            <span class="pointer" @click="onClickEditPassword">
              {{ $t("btnText.change_edit") }}
            </span>
          </div>
        </div>
      </div>
      <div class="m-descri">
        {{ $t("content.profile.base.password.tip") }}
      </div>
    </div>
    <!-- 手机号 -->
    <div class="account-item">
      <div class="flex-row flex-1">
        <IconLock class="svg" />
        <div class="content">
          <div class="text">
            <div class="label">
              {{ $t("content.profile.base.mobile.label") }}
            </div>
            <div class="descri">
              {{ profile.mobile ? "(86)" + profile.mobile : "" }}
              {{ $t("content.profile.base.mobile.tip") }}
            </div>
          </div>
          <div class="control">
            <div class="status" v-if="profile.mobile">
              <IconCircleCheck class="circle-svg" />
              <span>{{ $t("tag.is_set") }}</span>
            </div>
            <div class="status" v-else>
              <IconCircleCheck class="circle-svg" />
              <span>{{ $t("tag.not_set") }}</span>
            </div>
            <span class="split">|</span>
            <span class="pointer" @click="onClickEditMobile">
              {{
                profile.mobile
                  ? $t("btnText.change_edit")
                  : $t("btnText.setting")
              }}
            </span>
          </div>
        </div>
      </div>
      <div class="m-descri">
        {{ profile.mobile ? "(86)" + profile.mobile : "" }}
        {{ $t("content.profile.base.mobile.tip") }}
      </div>
    </div>
    <!-- 邮箱 -->
    <div class="account-item" v-if="false">
      <div class="flex-row flex-1">
        <IconLock class="svg" />
        <div class="content">
          <div class="text">
            <div class="label">
              {{ $t("content.profile.base.email.label") }}
            </div>
            <div class="descri">
              {{ profile.email }}
              {{ $t("content.profile.base.email.tip") }}
            </div>
          </div>
          <div class="control">
            <div class="status" v-if="profile.email">
              <IconCircleCheck class="circle-svg" />
              <span>{{ $t("tag.is_set") }}</span>
            </div>
            <div class="status" v-else>
              <IconCircleCheck class="circle-svg" />
              <span>{{ $t("tag.not_set") }}</span>
            </div>
            <span class="split">|</span>
            <span class="pointer" @click="onClickEditEmail">
              {{
                profile.email
                  ? $t("btnText.change_edit")
                  : $t("btnText.setting")
              }}
            </span>
          </div>
        </div>
      </div>
      <div class="m-descri">
        {{ profile.email }}
        {{ $t("content.profile.base.email.tip") }}
      </div>
    </div>
    <!-- 个人信息 -->
    <div class="account-item">
      <div class="flex-row flex-1">
        <IconLock class="svg" />
        <div class="content">
          <div class="text">
            <div class="label">
              {{ $t("content.profile.base.detail.label") }}
            </div>
            <div class="descri">
              {{
                $t("content.profile.base.detail.tip").replace(
                  "%user",
                  detailTip
                )
              }}
            </div>
          </div>
          <div class="control">
            <div class="status">
              <IconCircleCheck class="circle-svg" />
              <span>{{ $t("tag.is_set") }}</span>
            </div>
            <span class="split">|</span>
            <span class="pointer" @click="onClickEditResume">
              {{ $t("btnText.change_edit") }}
            </span>
          </div>
        </div>
      </div>
      <div class="m-descri">
        {{ $t("content.profile.base.detail.tip").replace("%user", detailTip) }}
      </div>
    </div>
    <!-- 证书 -->
    <div class="certificate">
      <div class="account-item">
        <div class="flex-row flex-1">
          <IconLock class="svg" />
          <div class="content">
            <div class="text">
              <div class="label">
                {{ $t("content.profile.base.cert.label") }}
              </div>
              <div class="descri">
                {{
                  $t("content.profile.base.cert.tip").replace(
                    "%num",
                    certificateList?.length || 0
                  )
                }}
              </div>
            </div>
            <div class="control">
              <div
                class="status"
                v-if="certificateList && certificateList.length > 0"
              >
                <IconCircleCheck class="circle-svg" />
                <span>{{ $t("tag.is_set") }}</span>
              </div>
              <div class="status" v-else>
                <IconCircleCheck class="circle-svg" />
                <span>{{ $t("tag.not_set") }}</span>
              </div>
              <span class="split">|</span>
              <span class="pointer" @click="onClickUploadCertificate">
                {{
                  certificateList && certificateList.length > 0
                    ? $t("btnText.change_edit")
                    : $t("btnText.setting")
                }}
              </span>
            </div>
            <div class="cert-list">
              <div
                class="cert-item"
                v-for="item in certificateList"
                :key="item.id"
              >
                <div class="icons">
                  <svg
                    class="delete-icon"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    @click="deleteCertificate(item.id)"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <circle
                      cx="12"
                      cy="12.0001"
                      r="12"
                      fill="black"
                      fill-opacity="0.6"
                    />
                    <circle
                      cx="12"
                      cy="12.0001"
                      r="11.5"
                      stroke="white"
                      stroke-opacity="0.6"
                    />
                    <path d="M7.33301 7.3335L16.6663 16.6668" stroke="white" />
                    <path d="M16.667 7.3335L7.33366 16.6668" stroke="white" />
                  </svg>
                  <svg
                    t="1734968982687"
                    class="view-icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="11119"
                    width="16"
                    height="16"
                    @click="onClickPreviewItem(item)"
                    style="
                      border-radius: 50%;
                      background: rgba(0, 0, 0, 0.5);
                      padding: 1.2px;
                    "
                  >
                    <path
                      fill="#fff"
                      d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3-7.7 16.2-7.7 35.2 0 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766z"
                      p-id="11120"
                    ></path>
                    <path
                      fill="#fff"
                      d="M508 336c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176z m0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
                      p-id="11121"
                    ></path>
                  </svg>
                </div>
                <img :src="item.single_pic" alt="" />
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="m-descri">
            {{
              $t("content.profile.base.cert.tip").replace(
                "%num",
                certificateList?.length || 0
              )
            }}
          </div>
        </div>
        <div class="cert-list m">
          <div class="cert-item" v-for="item in certificateList" :key="item.id">
            <div class="icons">
              <svg
                class="delete-icon"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                @click="deleteCertificate(item.id)"
                xmlns="http://www.w3.org/2000/svg"
              >
                <circle
                  cx="12"
                  cy="12.0001"
                  r="12"
                  fill="black"
                  fill-opacity="0.6"
                />
                <circle
                  cx="12"
                  cy="12.0001"
                  r="11.5"
                  stroke="white"
                  stroke-opacity="0.6"
                />
                <path d="M7.33301 7.3335L16.6663 16.6668" stroke="white" />
                <path d="M16.667 7.3335L7.33366 16.6668" stroke="white" />
              </svg>
              <svg
                t="1734968982687"
                class="view-icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="11119"
                width="16"
                height="16"
                @click="onClickPreviewItem(item)"
                style="
                  border-radius: 50%;
                  background: rgba(0, 0, 0, 0.5);
                  padding: 1.2px;
                "
              >
                <path
                  fill="#fff"
                  d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3-7.7 16.2-7.7 35.2 0 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766z"
                  p-id="11120"
                ></path>
                <path
                  fill="#fff"
                  d="M508 336c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176z m0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
                  p-id="11121"
                ></path>
              </svg>
            </div>
            <img :src="item.single_pic" alt="" />
          </div>
        </div>
      </div>
    </div>
    <FormModalMemberUpdatePassword
      ref="updatePasswordModalRef"
    ></FormModalMemberUpdatePassword>
    <FormModalMemberUpdateMobile
      ref="updateMobileModalRef"
    ></FormModalMemberUpdateMobile>
    <FormModalMemberUpdateEmail
      ref="updateEmailModalRef"
    ></FormModalMemberUpdateEmail>
    <FormModalMemberUpdateResume
      ref="updateResumeModalRef"
    ></FormModalMemberUpdateResume>
    <FormModalMemberUploadCertificate
      @uploadDown="certificateUploadDown"
      ref="uploadCertificateModalRef"
    ></FormModalMemberUploadCertificate>
    <FormModalMemberUpdatePlan
      @uploadDown="planUploadDown"
      ref="updatePlanModalRef"
    ></FormModalMemberUpdatePlan>

    <!-- 预览证书 -->

    <Preview ref="previewRef" :url="previewUrl"></Preview>
  </div>
</template>

<script setup lang="ts">
import {
  computed,
  getCurrentInstance,
  nextTick,
  onBeforeMount,
  onMounted,
  ref,
} from "vue";
import { postCertificateList } from "~/api/profile";
import type { CertificateListItem } from "~/types/profile";
import { useMemberStore, useGlobalStore } from "~/store";
import { useRoute } from "vue-router";
import { postCertificateDelete } from "../../../../../api/profile";
import { message, Modal } from "ant-design-vue";

const route = useRoute();

const $t = getCurrentInstance()?.appContext.config.globalProperties.$t;

const { profile } = useMemberStore();
const globalStore = useGlobalStore();
const certificateList = ref<CertificateListItem[] | undefined>();
const getCertificateListData = async () => {
  let res = await postCertificateList();
  if (res.code === 200) {
    certificateList.value = res.data || [];
  }
};

// 删除证书
const deleteCertificate = async (id: number) => {
  let confirmModal = Modal.confirm({
    title: $t("dialog.delete_cert.title"),
    content: $t("dialog.delete_cert.desc"),
    icon: () => h("", ""),
    centered: true,
    async onOk() {
      let loading = true;
      confirmModal.update({
        okButtonProps: {
          loading,
        },
      });
      let res = await postCertificateDelete(id);
      if (res.code === 200) {
        message.success(res.msg);
        getCertificateListData();
      } else {
        message.error(res.msg);
      }
      loading = false;
      confirmModal.update({
        okButtonProps: {
          loading,
        },
      });
    },
    onCancel() {
    },
    class: "profile-confirm-modal",
    okText: $t("btnText.ensure"),
    cancelText: $t("btnText.cancel1"),
    width: "19.7917vw",
    maskClosable: true,
  });
};
// 预览证书
const previewUrl = ref();
const previewRef = ref();
const onClickPreviewItem = (item: CertificateListItem) => {
  previewUrl.value = item.single_pic;
  nextTick(() => {
    previewRef.value.open();
  });
};

getCertificateListData();

const formValue = ref({
  username: {
    value: "Colin Lam",
    edit: false,
  },
  password: {
    value: "登录密码",
    edit: false,
  },
  phone: {
    value: "18750277437",
    edit: false,
  },
  email: {
    value: "ctw2016love@163.com",
    edit: false,
  },
  about: {
    value: "",
    edit: false,
  },
  certificate: {
    value: ["", ""],
  },
  plan: {
    value: "",
    edit: false,
  },
  wx: {
    value: "微信名",
    isBind: true,
  },
  facebook: {
    value: "",
    isBind: false,
  },
});

// ============================弹窗编辑处理=================================

const updatePasswordModalRef = ref();
const onClickEditPassword = () => {
  if (isMobile()) {
    goto("/mobile/updatePassword");
    return;
  }
  updatePasswordModalRef.value.show();
};

const updateMobileModalRef = ref();
const onClickEditMobile = () => {
  if (isMobile()) {
    goto("/mobile/updateMobile");
    return;
  }
  updateMobileModalRef.value.show();
};

const updateEmailModalRef = ref();
const onClickEditEmail = () => {
  if (isMobile()) {
    goto("/mobile/updateEmail");
    return;
  }
  updateEmailModalRef.value.show();
};

const detailTip = computed(() => {
  let tip = "";
  if (profile.last_name) {
    tip = profile?.last_name + ' '+ profile?.first_name;
  }
  return tip;
});
const updateResumeModalRef = ref();
const onClickEditResume = () => {
  if (isMobile()) {
    goto("/mobile/updateResume");
    return;
  }
  updateResumeModalRef.value.show();
};

const uploadCertificateModalRef = ref();
const onClickUploadCertificate = () => {
  if (isMobile()) {
    goto("/mobile/uploadCertificate");
    return;
  }
  uploadCertificateModalRef.value.show();
};
const certificateUploadDown = () => {
  getCertificateListData();
};

const updatePlanModalRef = ref();
const onClickUploadPlan = () => {
  if (isMobile()) {
    goto("/mobile/updatePlan");
    return;
  }
  updatePlanModalRef.value.show();
};
const planUploadDown = () => {
  getCertificateListData();
};
</script>
<style scoped lang="less">
.flex-row {
  display: flex;
  align-self: stretch;
  gap: 16px;
}

.account-info {
  margin-top: 42px;
  border-top: 1px solid #cdd6de;
  display: flex;
  flex-direction: column;
  padding-right: 590px;
  color: #323232;
  font-size: 16px;
  .account-item {
    margin-top: 40px;
    display: flex;
    align-items: flex-start;
    .svg {
      margin-top: 2px;
    }
    .content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex: 1;
      .text {
        .label {
          font-weight: 600;
          margin-bottom: 12px;
        }
        .descri {
          color: #646464;
        }
      }
      .control {
        display: flex;
        gap: 16px;
        color: #646464;
        align-items: center;
        .status {
          padding: 0;
          display: flex;
          align-items: center;
          gap: 16px;
        }
        .split {
          color: #cdd6de;
        }
      }
    }
  }
  .certificate {
    .content {
      flex-wrap: wrap;
    }
    .cert-list {
      width: 100%;
      margin-top: 16px;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 24px;
      align-items: center;
      justify-items: center;
      &.m {
        display: none;
      }
      .cert-item {
        border: 1px solid #cdd6de;
        align-self: stretch;
        height: 200px;
        position: relative;
        &:hover {
          .delete-svg {
            display: block;
          }
        }
        img {
          object-fit: contain;
          height: 100%;
        }
        .icons {
          position: absolute;
          right: 6px;
          top: 6px;
          display: flex;
          flex-direction: column;
          gap: 6px;
          svg {
            width: 24px;
            height: 24px;
            cursor: pointer;
          }
        }
      }
    }
  }
}
.m-descri {
  display: none;
}
@media screen and (max-width: 768px) {
  .m-descri {
    display: block;
  }
  .account-info {
    margin-top: 0;
    border-top: 0;
    padding: 100px 0;
    padding-bottom: 200px;
    font-size: 72px;
    .account-item {
      flex-direction: column;
      padding: 100px 0;
      gap: 100px;
      margin-top: 0;
      border-bottom: 1px solid #cdd6de;
      .m-descri {
        font-size: 70px;
        color: #646464;
      }
      .svg {
        width: 100px;
        height: 100px;
      }
      .circle-svg {
        width: 82px;
        height: 82px;
      }
      .content {
        .text {
          .label {
            margin-left: 60px;
            margin-bottom: 0;
          }
        }
        .descri {
          display: none;
        }
        .control {
          .status {
            gap: 102px;
          }
          .split {
            margin: 0 102px;
          }
        }
        .cert-list {
          display: none;
        }
      }
    }
    .cert-list.m {
      display: grid !important;
      margin-bottom: 0;
      grid-template-columns: 1fr 1fr;
      margin-top: 0;
      gap: 60px;
      .cert-item {
        height: auto;
        .icons {
          display: none;
        }
      }
    }
  }
}
</style>
